<template>
    <div class="baseBox">
        <pagetitle></pagetitle>
        <!-- 设备基本信息 -->
        <div class="warmprompt">
            <div class="warmprompttitle">设备基本信息</div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="设备分组">
                    <el-input v-model="formInline.user" placeholder="输入或选择设备的分组"></el-input>
                </el-form-item>
                <el-form-item label="设备供应商">
                    <el-input v-model="formInline.user" placeholder="输入设备的供应商"></el-input>
                </el-form-item>
                <el-form-item label="设备性质">
                    <el-input v-model="formInline.user" placeholder="选择设备生产性质"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 设备供应商信息 -->
        <div class="warmprompt">
            <div class="warmprompttitle">设备供应商信息</div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="供应商品牌">
                    <el-input v-model="formInline.user" placeholder="三峡农夫"></el-input>
                </el-form-item>
                <el-form-item label="设备型号">
                    <el-input v-model="formInline.user" placeholder="ICC-11"></el-input>
                </el-form-item>
                <el-form-item label="计量单位">
                    <el-select v-model="formInline.region" placeholder="选择计量单位">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="formInline.user" placeholder="输入产品单价"></el-input>
                </el-form-item>
                <el-form-item label="联系网址">
                    <el-input v-model="formInline.user" placeholder="请输入设备介绍网址"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 物联网通信协议及入网方式 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">物联网通信协议及入网方式<i class="el-icon-warning-outline"></i></div>
            </div>
            <div class="netintype">
                <div class="netintypeLeft">
                    <div class="lefts">
                        <div class="leftCont">
                            物理层<br />
                            、<br />
                            数据链路层协议
                        </div>
                        <div class="rightCont">
                            <div class="rightContItem">远距离蜂窝通信：</div>
                            <div class="rightContItem">远距离非蜂窝通信：</div>
                            <div class="rightContItem">近距离通信：</div>
                            <div class="rightContItem">有线通信：</div>
                            <div class="rightContItem">以太网：</div>
                        </div>
                    </div>
                    <div class="rightContItem botitme">网络层、传输协议</div>
                    <div class="rightContItem botitme botitmenoborder">应用层协议</div>
                </div>
                <div class="netintypeRight">
                    <div class="rightContItem rightitem">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="2G"></el-checkbox>
                            <el-checkbox label="4G"></el-checkbox>
                            <el-checkbox label="5G"></el-checkbox>
                            <el-checkbox label="NB-IoT"></el-checkbox>
                            <el-checkbox label="选中且禁用" disabled></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="rightContItem rightitem">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="WiFi"></el-checkbox>
                            <el-checkbox label="ZigBee" disabled></el-checkbox>
                            <el-checkbox label="LoRa" disabled></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="rightContItem rightitem">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="RFID" disabled></el-checkbox>
                            <el-checkbox label="NFC" disabled></el-checkbox>
                            <el-checkbox label="Bluetooth" disabled></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="rightContItem rightitem">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="USB"></el-checkbox>
                            <el-checkbox label="RS-232"></el-checkbox>
                            <el-checkbox label="RS-422"></el-checkbox>
                            <el-checkbox label="RS-485"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="rightContItem rightitem">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="以太网"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="rightContItem rightitem">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="IPv 4"></el-checkbox>
                            <el-checkbox label="IPv 6"></el-checkbox>
                            <el-checkbox label="TCP"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="rightContItem rightitem botitmenoborder">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="Modbus协议"></el-checkbox>
                            <el-checkbox label="MQTT协议"></el-checkbox>
                            <el-checkbox label="CoAP协议"></el-checkbox>
                            <el-checkbox label="REST/HTTP协议"></el-checkbox>
                            <el-checkbox label="DDS协议"></el-checkbox>
                            <el-checkbox label="AMQP协议"></el-checkbox>
                            <el-checkbox label="XMPP协议"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
        </div>
        <!-- 物联网端口信号类型 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">物联网端口信号类型<i class="el-icon-warning-outline"></i></div>
                <el-button type="primary">添加信号端口</el-button>
            </div>
            <el-form :inline="true" :model="formInline" class="baseBoxsearchform">
                <el-form-item label="通道类型">
                    <el-select v-model="formInline.region" placeholder="选择通道类型">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="信号类型">
                    <el-select v-model="formInline.region" placeholder="选择信号类型">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border style="width: 100%" class="table1">
                <el-table-column prop="date" label="添加时间"> 2021年8月3日 </el-table-column>
                <el-table-column prop="name" label="通道编号(排序)">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入通道编号"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="通道类型(排序)">
                    <template #default="scope">
                        <el-select v-model="formInline.region" size="small" placeholder="选择的通道类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="通道名称">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入通道名称"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="信号类型">
                    <template #default="scope">
                        <el-select v-model="formInline.region" size="small" placeholder="选择的信号类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="线性映射" width="65">4-></el-table-column>
                <el-table-column prop="address" label="线性映射" width="65">起点</el-table-column>
                <el-table-column prop="address" label="线性映射" width="65">20-></el-table-column>
                <el-table-column prop="address" label="线性映射" width="65">末点</el-table-column>

                <el-table-column prop="address" label="单位">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入映射单位"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="报警下限">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入报警下限"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="报警上限">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入报警上限"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="130">
                    <template #default="scope">
                        <el-button type="primary" link>移动</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="baseTableTip">说明：记录每台物联网设备的信号端口，方便后面和数字设备对接端口。</div>
        </div>
        <!-- 联网设备组装配件信息 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">联网设备组装配件信息<i class="el-icon-warning-outline"></i></div>
                <el-button type="primary">添加新配件</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="分类序号"> </el-table-column>
                <el-table-column prop="name" label="添加时间">2021年8月3日</el-table-column>
                <el-table-column prop="address" label="配件分组">
                    <template #default="scope">
                        <el-select v-model="formInline.region" size="small" placeholder="配件分组">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="供应商品牌">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入供应商品牌"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="配件名称">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件名称"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="配件型号">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件型号"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="address" label="配件数量">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件数量"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="计量单位">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入计量单位"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="单价">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入单价"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="配件特征">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件特征"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="采购方式">
                    <template #default="scope">
                        <el-select v-model="formInline.region" size="small" placeholder="采购方式">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="130">
                    <template #default="scope">
                        <el-button type="primary" link>查看</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="baseTableTip">说明：组装设备需要的配件清单，方便自动生成《组装配件清单附件》。</div>
        </div>
        <!-- 物联网设备安装配件信息 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">物联网设备安装配件信息<i class="el-icon-warning-outline"></i></div>
                <el-button type="primary">添加新配件</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="分类序号"> </el-table-column>
                <el-table-column prop="name" label="添加时间">2021年8月3日</el-table-column>
                <el-table-column prop="address" label="配件分组">
                    <template #default="scope">
                        <el-select v-model="formInline.region" size="small" placeholder="配件分组">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="供应商品牌">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入供应商品牌"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="配件名称">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件名称"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="配件型号">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件型号"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="address" label="配件数量">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件数量"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="计量单位">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入计量单位"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="单价">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入单价"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="配件特征">
                    <template #default="scope">
                        <el-input v-model="formInline.user" size="small" placeholder="输入配件特征"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="采购方式">
                    <template #default="scope">
                        <el-select v-model="formInline.region" size="small" placeholder="采购方式">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="130">
                    <template #default="scope">
                        <el-button type="primary" link>查看</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="baseTableTip">说明：安装设备需要的配件清单，方便自动生成《安装配件清单附件》。</div>
        </div>
        <!-- 物联网备特征描述 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">物联网备特征描述<i class="el-icon-warning-outline"></i></div>
            </div>
            <el-input type="textarea" class="textareaInput" resize="none" :rows="6" placeholder="请输入设备特征" v-model="input"> </el-input>
        </div>
        <!-- 物联网设备其他支撑文件 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">物联网设备其他支撑文件<i class="el-icon-warning-outline"></i></div>
                <el-button type="primary">添加一行</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="添加时间">2021年8月3日 </el-table-column>
                <el-table-column prop="name" label="文件名称"></el-table-column>
                <el-table-column prop="address" label="出具单位"></el-table-column>
                <el-table-column prop="address" label="简单描述">简单描述</el-table-column>
                <el-table-column prop="address" label="有效期起"></el-table-column>
                <el-table-column prop="address" label="有效期止"> </el-table-column>
                <el-table-column prop="address" label="操作" width="180">
                    <template #default="scope">
                        <el-button type="primary" link>上传附件</el-button>
                        <el-button type="primary" link>查看</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="baseTableTip">说明：需要支持或者授权的文件、证明材料、合格证书、检验报告等，方便用户存档，平台保密。</div>
        </div>
        <!-- 物联网设备图片信息 -->
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="baseBoxsearchTitle">物联网设备图片信息<i class="el-icon-warning-outline"></i></div>
            </div>
            <div class="uploadFileBox">
                <div class="uploadFileItem">
                    <uploadFile text="上传设备图片" textSize="16"></uploadFile>
                </div>
                <div class="uploadFileItem">
                    <uploadFile text="上传设备图片" textSize="16"></uploadFile>
                </div>
                <div class="uploadFileItem">
                    <uploadFile text="上传设备图片" textSize="16"></uploadFile>
                </div>
                <div class="uploadFileItem">
                    <uploadFile text="上传设备图片" textSize="16"></uploadFile>
                </div>
                <div class="uploadFileItem">
                    <uploadFile text="上传设备图片" textSize="16"></uploadFile>
                </div>
            </div>
        </div>
        <div class="baseBoxContent">
            <el-button type="primary">返回</el-button>
            <el-button>保存</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const input = ref("");
const checkList = ref([]);
const tableData = ref([{}, {}]);
const formInline: any = ref({});
const setCloSpan = () => {
    console.log(document);
    // let n: any = document.getElementsByClassName("table1")[0];
    // let t = n.getElementsByClassName("el-table__header")[0].rows[0].cells;
    // console.log(t);
    // t[5].colSpan = 4;
    // t[6].style.display = "none";
    // t[7].style.display = "none";
    // t[8].style.display = "none";
};
setCloSpan();
// export default {
//     data() {
//         return {
//             input: '',
//             tableData: [{}, {}, {}, {}],
//             formInline: {},
//             dialogVisible: false,
//             checkList: []
//         }
//     },
//     mounted() {
//         this.$nextTick(() => {
//             this.setCloSpan()
//         })
//     },
//     methods: {
//         setCloSpan() {
//             let n = document.getElementsByClassName('table1')[0]
//             let t = n.getElementsByClassName('el-table__header')[0].rows[0].cells
//             console.log(t)
//             t[5].colSpan = 4
//             t[6].style.display = 'none'
//             t[7].style.display = 'none'
//             t[8].style.display = 'none'
//         },
//         // 跳转到指定页面
//         toAssignPage(url, tag, title) {
//             this.$store.commit('setMenuIdentification', {
//                 tag,
//                 title
//             })
//             this.$fn.setSelectMenu(url, tag)
//         }
//     }
// }
</script>
<style lang="scss" scoped>
.netintype {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(100% - 60px);
    margin: 0 30px;
    border: 1px solid #cccccc;
    .netintypeLeft {
        width: 330px;
        border-right: 1px solid #cccccc;
        .lefts {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .leftCont {
                width: 75px;
                border-right: 1px solid #cccccc;
                padding: 10px 30px;
                font-size: 16px;
                height: 255px;
                color: #333333;
                border-bottom: 1px solid #cccccc;
            }
            .rightCont {
                width: 100%;
            }
        }
    }
    .netintypeRight {
        width: 100%;
    }
    .rightContItem {
        height: 51px;
        border-bottom: 1px solid #cccccc;
        width: 100%;
        font-size: 16px;
        color: #333333;
        padding-right: 30px;
        text-align: right;
        line-height: 50px;
    }
    .botitme {
        text-align: center;
    }
    .botitmenoborder {
        border: none;
    }
    .rightitem {
        text-align: left;
        padding-left: 60px;
    }
}
.baseBox {
    width: 100%;
    .warmprompt {
        padding: 20px;
        background: #ffffff;
        margin-bottom: 15px;
        .warmprompttitle {
            font-size: 16px;
            font-weight: bold;
            color: #252b3a;
        }
        .demo-form-inline {
            margin-top: 20px;
            .addRess {
                width: 300px;
            }
        }
    }
    .baseBoxContent {
        background: #ffffff;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.03);
        margin-top: 15px;
        padding: 30px 0;
        .baseBoxsearch {
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 30px;
            .baseBoxsearchTitle {
                font-size: 16px;
                font-weight: bold;
                color: #252b3a;
                i {
                    margin-left: 20px;
                    cursor: pointer;
                }
            }
        }
        .baseBoxsearchform {
            padding-left: 30px;
        }
        .basesright {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .input {
                width: 350px;
                margin-right: 20px;
            }
        }
        .baseTableTip {
            font-size: 16px;
            color: #333333;
            margin-top: 10px;
        }
        .btns {
            margin-top: 30px;
            button {
                margin-right: 20px;
            }
        }
    }
}
.uploadImgBox {
    width: 120px;
    height: 120px;
}
.saveBtn {
    width: 100%;
}
.textareaInput {
    width: calc(100% - 60px);
    margin: 0 30px;
}
.uploadFileBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px;
    .uploadFileItem {
        width: 200px;
        height: 200px;
    }
}
</style>
